import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store/index'
import { Notification } from 'element-ui'

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

// 修改原型对象中的push方法
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}
// 修改原型对象中的push方法
const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (location) {
  return originalReplace.call(this, location).catch(err => err)
}

const routes = [
  {
    path: '/',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    children: [
      {
        path: 'book-list',
        name: 'bookList',
        meta: {
          title: '图书列表',
          icon: 'el-icon-film'
        },
        component: () => import('../views/bookList.vue')
      }, {
        path: 'add-book',
        name: 'addBook',
        meta: {
          title: '添加图书',
          icon: 'el-icon-circle-plus-outline'
        },
        component: () => import('../views/addBook.vue')
      }, {
        path: 'edit-book',
        name: 'editBook',
        meta: {
          title: '修改图书',
          icon: 'el-icon-edit-outline'
        },
        component: () => import('../views/editBook.vue')
      }, {
        path: 'user-list',
        name: 'userList',
        meta: {
          title: '用户列表',
          icon: 'el-icon-user'
        },
        component: () => import('../views/userList.vue')
      }
    ]
  }
]

const asyncRoutes = {
  2: [
    {
      path: 'book-list',
      name: 'bookList',
      meta: {
        title: '图书列表',
        icon: 'el-icon-film'
      }
    }
  ],
  1: [
    {
      path: 'book-list',
      name: 'bookList',
      meta: {
        title: '图书列表',
        icon: 'el-icon-film'
      }
    }, {
      path: 'add-book',
      name: 'addBook',
      meta: {
        title: '添加图书',
        icon: 'el-icon-circle-plus-outline'
      }
    }, {
      path: 'edit-book',
      name: 'editBook',
      meta: {
        title: '修改图书',
        icon: 'el-icon-edit-outline'
      }
    }
  ],
  3: [
    {
      path: 'user-list',
      name: 'userList',
      meta: {
        title: '用户列表',
        icon: 'el-icon-user'
      }
    }, {
      path: 'book-list',
      name: 'bookList',
      meta: {
        title: '图书列表',
        icon: 'el-icon-film'
      }
    }
  ]
}

const typeOfUser = {
  1: ['bookList', 'addBook', 'editBook'],
  2: ['bookList'],
  3: ['userList', 'bookList']
}

const nameOfPage = {
  bookList: '图书列表',
  addBook: '添加图书',
  editBook: '编辑图书',
  userList: '用户列表'
}

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 前置路由守卫
router.beforeEach((to, from, next) => {
  NProgress.start()
  var token = localStorage.getItem('token')
  if (to.name !== 'Login' && !token) next({ name: 'Login' })
  localStorage.setItem('menuRoutes', JSON.stringify(asyncRoutes[store.state.user.role]))
  if (store.state.user.role && from.name !== 'Login') {
    if (typeOfUser[store.state.user.role].indexOf(to.name) == -1) {
      if (nameOfPage[to.name]) {
        Notification.error({
          title: '没有权限',
          message: `无法访问${nameOfPage[to.name]}页面`
        })
        next({ name: typeOfUser[store.state.user.role][0] })
      } else {
        Notification.error({
          title: '出错啦',
          message: '找不到该界面'
        })
      }
      next({ name: typeOfUser[store.state.user.role][0] })
    }
  }
  // 如果用户未能验证身份，则 `next` 会被调用两次
  next()
})
router.afterEach(() => {
  NProgress.done()
})
export default router
